<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,
    maximum-scale=1.0,minimum-scale=1.0">
    <title>京东 </title>
    <!-- 引入文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/index.js"></script>

</head>

<body>
    <!-- 头部打开APP -->
    <header class="app">
        <ul>
            <li><img src="images/close.png" alt=""></li>
            <li><img src="images/logo.png" alt=""></li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!-- 主体部分 -->
    <div class="main-content">
        <!-- 轮播图 -->
        <div class="banner">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="upload/banner.dpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/banner1.dpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/banner2.dpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/banner3.dpg" alt=""></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 品牌日 -->
        <div class="brand">
            <div>
                <a href="#"><img src="upload/pic11.dpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="upload/pic22.dpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="upload/pic33.dpg" alt=""></a>
            </div>
        </div>
        <!-- nav 区 -->
        <nav class="nav clearfix">
            <a href="#"><img src="upload/nav01.webp" alt=""><span>京东超市</span></a>
            <a href="#"><img src="upload/nav02.webp" alt=""><span>数码电器</span></a>
            <a href="#"><img src="upload/nav04.webp" alt=""><span>京东服饰</span></a>
            <a href="#"><img src="upload/nav05.webp" alt=""><span>京东生鲜</span></a>
            <a href="#"><img src="upload/nav03.webp" alt=""><span>京东到家</span></a>
            <a href="#"><img src="upload/nav06.webp" alt=""><span>充值缴费</span></a>
            <a href="#"><img src="upload/nav07.webp" alt=""><span>9.9元拼</span></a>
            <a href="#"><img src="upload/nav08.webp" alt=""><span>领劵</span></a>
            <a href="#"><img src="upload/nav09.webp" alt=""><span>领津贴</span></a>
            <a href="#"><img src="upload/nav10.webp" alt=""><span>PLUS会员</span></a>
        </nav>
        <!-- 快报 -->
        <div class="news clearfix">
            <a href="#"><img src="upload/new1.dpg" alt=""></a>
            <a href="#"><img src="upload/new2.dpg" alt=""></a>
            <a href="#"><img src="upload/new3.dpg" alt=""></a>
        </div>
        <!-- 新人立减 -->
        <div class="sec-logo">
            <img src="upload/xinren.webp" alt="">
        </div>
        <!-- 东家小院 -->
        <section class="djxy">
            <div class="sec-logo"><img src="upload/djxy.dpg" alt=""></div>
            <div class="djxy-bd">
                <div class="bd-top">
                    <div class="bd-left">
                        <div class="hd">
                            <span>开学放送</span><br>
                            <p>快趁开学前收集一波</p>
                        </div>
                        <div class="bd-img">
                            <a href="#"><img src="upload/bd1.dpg" alt=""></a>
                            <a href="#"><img src="upload/bd2.dpg" alt=""></a>
                        </div>
                    </div>
                    <div class="bd-right">
                        <div class="hd">
                            <span>内衣洗护</span><br>
                            <p>贴身衣物洗护京选好物</p>
                        </div>
                        <div class="bd-img">
                            <a href="#"><img src="upload/bd3.dpg" alt=""></a>
                            <a href="#"><img src="upload/bd4.dpg" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="bd-bottom">
                    <div>
                        <div class="hd bd-bot">
                            <span>完美纪念</span><br>
                            <p>专属礼物</p>
                        </div>
                        <div class="bd-img bt">
                            <a href="#"><img src="upload/bd5.dpg" alt=""></a>
                        </div>
                    </div>
                    <div>
                        <div class="hd bd-bot">
                            <span>实用时尚</span><br>
                            <p>保暖鞋秀技</p>
                        </div>
                        <div class="bd-img bt">
                            <a href="#"><img src="upload/bd6.dpg" alt=""></a>
                        </div>
                    </div>
                    <div>
                        <div class="hd bd-bot">
                            <span>抑菌洁衣</span><br>
                            <p>异味拜拜</p>
                        </div>
                        <div class="bd-img bt">
                            <a href="#"><img src="upload/bd7.dpg" alt=""></a>
                        </div>
                    </div>
                    <div>
                        <div class="hd bd-bot">
                            <span>木作匠人</span><br>
                            <p>用木搭个家</p>
                        </div>
                        <div class="bd-img bt">
                            <a href="#"><img src="upload/bd8.dpg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 每日逛 -->
        <section class="djxy">
            <div class="sec-logo"><img src="upload/mrg.dpg" alt=""></div>
            <div class="bd-bottom">
                <div class="bor-none">
                    <div class="hd bd-bot">
                        <span>完美纪念</span><br>
                        <p>专属礼物</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd9.dpg" alt=""></a>
                    </div>
                </div>
                <div class="bor-none">
                    <div class="hd bd-bot">
                        <span>实用时尚</span><br>
                        <p>保暖鞋秀技</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd10.dpg" alt=""></a>
                    </div>
                </div>
                <div class="bor-none">
                    <div class="hd bd-bot">
                        <span>抑菌洁衣</span><br>
                        <p>异味拜拜</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd11.dpg" alt=""></a>
                    </div>
                </div>
                <div class="bor-none">
                    <div class="hd bd-bot">
                        <span>木作匠人</span><br>
                        <p>用木搭个家</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd12.dpg" alt=""></a>
                    </div>
                </div>
                <div>
                    <div class="hd bd-bot">
                        <span>完美纪念</span><br>
                        <p>专属礼物</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd13.dpg" alt=""></a>
                    </div>
                </div>
                <div>
                    <div class="hd bd-bot">
                        <span>实用时尚</span><br>
                        <p>保暖鞋秀技</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd14.dpg" alt=""></a>
                    </div>
                </div>
                <div>
                    <div class="hd bd-bot">
                        <span>抑菌洁衣</span><br>
                        <p>异味拜拜</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd15.dpg" alt=""></a>
                    </div>
                </div>
                <div>
                    <div class="hd bd-bot">
                        <span>木作匠人</span><br>
                        <p>用木搭个家</p>
                    </div>
                    <div class="bd-img bt">
                        <a href="#"><img src="upload/bd16.dpg" alt=""></a>
                    </div>
                </div>
            </div>
    </div>
    </section>
    </div>
</body>

</html>